<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</head>

<style>
#box {
	width: 61.2rem;
	height: 130rem;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "" 微软雅黑 ",Tahoma,Arial";
	color: #666;
}

.form-control {
	font-size: 2rem;
	width: 30rem;
	border-radius: 15px;
}

#head {
	opacity: 0.9;
	width: 30rem;
	margin-left: 4rem;
	position: absolute;
	z-index: 10;
	top: 2rem;
	height: 1rem;
}

i {
	position: absolute;
	top: 0.46rem;
	right: 1rem;
	font-size: 49px;
}

.flex {
	width: 1000px;
	height: 600px;
	left: 0;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.flex ul.slider {
	height: 600px;
	position: absolute;
}

.flex ul.slider li {
	width: 1000px;
	height: 600px;
	float: left;
}

.flex ul.slider li img {
	width: 1000px;
}

.btn .prev {
	width: 80px;
	height: 100px;
	background: url(/left.png) no-repeat;
	position: absolute;
	top: 250px;
	left: 10px;
}

.btn .next {
	width: 80px;
	height: 100px;
	background: url(/right.png) no-repeat;
	position: absolute;
	top: 250px;
	right: 10px;
}

.title {
	width: 80px;
	height: 50px;
	position: absolute;
	top: 40px;
	right: 70px;
}

.holes {
	font-family: "微软雅黑";
	color: #FF575A;
}

ul {
	list-style: none;
}

#content {
	margin-left: 80px;
}

#guodu {
	background-color: #e6ebee;
	width: 62.5rem;
	height: 2.5rem;
}

#footer {
	font-size: 2.4rem;
}

.ttitle {
	font-size: 2.7rem;
	font-weight: bold;
}

#footer li {
	display: block;
	width: 57rem;
	height: 11rem;
	margin-left: 2rem;
	margin-top: 3rem;
	border-bottom: 0.4rem solid #e6ebee;
}

#xiaotu {
	position: fixed;
	z-index: 999;
	top: 102.5rem;
}

.geren {
	position: fixed;
	width: 5rem;
	height: 6rem;
	display: block;
	left: 47rem;
}

.yuyue1 {
	position: absolute;
	width: 5rem;
	height: 5rem;
	display: block;
	left: 29rem;
	top: 40rem;
}
</style>
<script type="text/javascript">
	//页面获取数据
	$(function() {
		refurbishIndex();

	});
	function refurbishIndex() {
		$.ajax({
			type : "get",
			url : "/list",
			data : {

			},
			async : false,
			success : function(data) {
				var str = "";
				for (i in data) {

					str += "<li>" + "<span class='ttitle'>"
							+ "<img src='/11.JPG' height='60'width='85'>"
							+ "<a href='xiangqing' >" + data[i].title + "</a>"
							+ "</span>" + "<br>" + data[i].shcount + "</li>"

				}
				document.getElementById("zixun").innerHTML = str;
			}
		});
	}
</script>
<body>
	<div id="app"></div>
	<div id="box">
		<div class="flex">
			<ul class="slider">
				<li><img src="/banner1.jpg" height=550></li>
				<li><img src="/banner2.jpg" height=550></li>
				<li><img src="/banner3.jpg" height=550></li>
			</ul>
			<ul class="btn">
				<li class="prev"></li>
				<li class="next"></li>
			</ul>
		</div>
		<div id="content">
			<a class="yuyue1" href="yu"></a> <img src="/menua.JPG"
				width="850">
		</div>

		<div id="guodu"></div>
		<div id="footer">
			<ul id="zixun">
				<li><span class="ttitle"><img src="/11.jpg"
						height="60" width="85"><a href="success">停诊通知</a></span><br>校医室将于7月10日停诊并改为7月12日,具体详情。</li>
				<li><span class="ttitle"><img src="/22.JPG"
						height="60" width="85"><a>义诊通知</a></span><br>7月8日中山医院著名教授在广东科贸职业学院义诊。</li>
				<li><span class="ttitle"><img src="/11.JPG"
						height="60" width="85"><a>停诊通知</a></span><br>校医室将于7月10日停诊并改为7月12日,具体详情。</li>
			</ul>
		</div>
		<div id="xiaotu">
			<a href="PersonalCenter" class="geren"></a> <img
				src="/33.JPG" width="1000">
		</div>
	</div>
	</div>
	<script>
		var vm = new Vue({
			el : '#app',
			data : {},
			methods : {}
		});
	</script>
</body>

</html>
<script type="text/javascript">
	$(document).ready(function() {
		//自动轮播
		var linum = $(".slider li").length;
		var liwidth = $(".slider li").width();
		$(".slider").css("width", linum * liwidth);
		var i = 0;
		function autoplay() {
			if (i < linum - 1) {
				i++;
			} else {
				i = 0;
			}
			$(".slider").animate({
				"left" : -liwidth * i + "px"
			});
		}
		var set = setInterval(autoplay, 3000);

		//点击左右按钮会滑动
		$(".flex").hover(function() {
			$(".btn").css("display", "block");
			clearInterval(set);
		}, function() {
			$(".btn").css("display", "none");
			set = setInterval(autoplay, 4000);
		});

		$(".btn .next").click(function() {
			if (!$(".slider").is(":animated")) {
				autoplay();
			}
		});

		function autoplayprev() {
			if (i <= 0) {
				i = 2;
			} else {
				i--;
			}
			$(".slider").animate({
				"left" : -liwidth * i + "px"
			}, 300);
		}

		$(".btn .prev").click(function() {
			if (!$(".slider").is(":animated")) {
				autoplayprev();
			}
		});

	});
</script>